import React, { Component } from 'react';
import { Text, View, StyleSheet} from 'react-native';
import { Card } from 'iftide';

export default class User1 extends Component { 
    onPress() { 
        console.log('press');
      }

    render() {
        const img = require('./Icon.png');

        var titleExtra2 = (
            <View style={styles.container}>
                <Text style={styles.tag1}>1-3年</Text>
                <Text style={styles.tag2}>风险等级4</Text>
            </View>
        );

        var bottom = (
            <View style={styles.container}>
                <Text style={[styles.btn,styles.btn1]}>撤回</Text>
                <Text style={[styles.btn,styles.btn2]}>预约</Text>
                <Text style={[styles.btn,styles.btn3]}>购买</Text>
            </View>
        );

        return (
            <View>
               
                <Card
                    full={false}
                    onPress={this.onPress}
                    headerIcon={img}
                    headerTitle={<Text>自定义卡片标题</Text>}
					showHeadLine={false}
                    headerTitleExtra={<Text>标题辅助</Text>}
                    content={<View style={{ height: 100 }}><Text>这里可以放图片，文字，按钮</Text></View>}
                    footer={<Text>底部内容</Text>}
                    footerExtra={<Text>底部内容辅助</Text>}
                    showShadow={false}
                    bgImg={require('./bg.png')}
                    marginTop={100}
                    marginBottom={50}
                />
                <Card
                    full={false}
                    headerIcon={img}
                    headerTitle={<Text>AI智投13号</Text>}
                    headerTitleExtra={titleExtra2}
                    content={<View style={{ height: 100 }}><Text>自定义内容区域：图片，文字，按钮，构件</Text></View>}
                    footerConStyles={{ borderColor: '#d8d8d8', borderTopWidth: 1,height:40}}
                    footerExtra={bottom}
                    marginTop={5}
                    marginBottom={5}
                />
                </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flexDirection: "row",
    },
    tag1: {
        paddingLeft: 5,
        paddingRight: 5,
        borderRadius: 3,
        borderWidth: 1,
        borderColor: '#FF7b7b',
        fontSize: 12,
        color:'#FF7b7b',
    },
    tag2: {
        paddingLeft: 5,
        paddingRight: 5,
        borderRadius: 10,
        borderWidth: 1,
        borderColor: '#FF7b7b',
        fontSize: 12,
        color:'#FF7b7b',
        marginLeft:15,
    },
    btn: {
        marginLeft:15,
        paddingLeft: 5,
        paddingRight: 5,
        borderRadius: 3,
        borderWidth: 1,
        fontSize: 15
    },
    btn1: {
        borderColor: 'grey',
    },
    btn2: {
        borderColor: 'red',
    },
    btn3: {
        borderColor: 'orange',
    }
})